
<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4">
          <div>
            <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
          </div>
        </section>

      <el-table :data="tableList" border class="mt-4" stripe>
        <el-table-column label="序号" prop="id"/>
		<el-table-column label="特权名称" prop="name"></el-table-column>
        <el-table-column label="点亮时icon" prop="light_icon">
          <template slot-scope="scoped">
            <el-popover max-width="420" placement="right" trigger="hover">
              <img :lazy="true" :src="scoped.row.light_icon" class="imageStyle" fit="fill" />
              <img
                slot="reference"
                :src="scoped.row.light_icon"
                alt=""
                style="width: 80px"
              />
            </el-popover>
            
          </template>
        </el-table-column>
        <el-table-column label="未点亮时icon" prop="icon">
          <template slot-scope="scoped">
            <el-popover max-width="420" placement="right" trigger="hover">
              <img :lazy="true" :src="scoped.row.icon" class="imageStyle" fit="fill" />
              <img
                slot="reference"
                :src="scoped.row.icon"
                alt=""
                style="width: 80px"
              />
            </el-popover>
            
          </template>
        </el-table-column>
        <el-table-column label="分类id" prop="category_id">
			<template slot-scope="{row}">
				{{ row.category_id ? row.category_id : '' }}
          	</template>
		</el-table-column>
        <el-table-column label="标签" prop="tag"></el-table-column>
        <el-table-column label="更新时间" prop="updated_at"/>
			
        <el-table-column label="操作" width="300">
          <template slot-scope="{row}">
            <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <cus-pagination
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="initData"
      /> -->

      <el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="addDialog2"
        lock-scroll
        width="30%"
        @close="closeAddDialog2"
      >
        <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">
            <el-form-item label="特权名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="点亮时icon" prop="light_icon">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.light_icon, 'show_box': !formData.light_icon}">
                        <img v-if="formData.light_icon" :src="formData.light_icon" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess1"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove1"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="未点亮时icon" prop="icon">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.icon, 'show_box': !formData.icon}">
                        <img v-if="formData.icon" :src="formData.icon" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess2"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove2"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            
            <el-form-item label="分类id" prop="category_id">
				<el-select
					v-model="formData.category_id"
					placeholder="请选择分类"
				>
					<el-option
					v-for="item in categoryOption"
					:key="item.id"
					:label="item.title"
					:value="item.id"
					>
					</el-option>
				</el-select>
            </el-form-item>
            <el-form-item label="标签" prop="tag">
                <el-input v-model.number="formData.tag"></el-input>
            </el-form-item>
        </el-form>

        <section slot="footer">
          <el-button @click="addDialog2 = false">取消</el-button>
          <el-button type="primary" @click="onSubmit()">确定</el-button>
        </section>
      </el-dialog>
    </el-card>


</template>

<script>
	import { 
		adminPrivilegeList,
		PrivilegeSave,
		PrivilegeDelete
	} from '@/api/nobilityManagement'
	import { getCateData } from '@/api/personalizedMall/commodity'
	import { productList } from '@/api/petsManagement'

	export default {
		data() {
			return {
				categoryOption: [{ id: 0, title: '所有分类' }],
				tableList: [],
				listQuery: {
					page: 1,
					perPage: 10,
					start_time: undefined,
					end_time: undefined,
					name: undefined
				},
				meta: {
					page: 1,
					perPage: 10
				},
				total: 0,
				/* 弹出框开关 */
				addDialog: false,
				addDialog2: false,
		
				formData: {
					id: undefined,
					name: undefined,
					icon: undefined,
					light_icon: undefined,
					tag: undefined,
					category_id: undefined,
					sort: undefined
				},
				rules: {
					icon: [{ required: true, message: '请上传', trigger: 'blur' }],
					name: [{ required: true, message: '请输入', trigger: 'blur' }],
					light_icon: [{ required: true, message: '请上传', trigger: 'blur' }],
					tag: [{ required: true, message: '请输入', trigger: 'blur' }]
				},
				isEdit: false,
			}
		},
		created() {
			this.initData()
			this.handleGetCateData()
		},
		methods: {
			handleGetCateData() {
				getCateData().then(res => {
					this.categoryOption = [...this.categoryOption, ...res.data]
				})
			},
			handleEdit(row) {
				this.formData = JSON.parse(JSON.stringify(row))
				this.isEdit = true
				this.addDialog2 = true
				
			},
			handleAdd() {
				this.isEdit = false
				this.addDialog2 = true
			},
			async initData() {
				try {
					for (let key in this.listQuery) {
						this.listQuery[key] = !this.listQuery[key] ? undefined : this.listQuery[key]
					}
					const { data } = await adminPrivilegeList(this.listQuery)
					// this.total = data.total
					this.tableList = data
				
				} catch (e) {
					console.error(e)
				}
			},
		
			handleDelete(row) {
				this.$confirm('此操作不可恢复，是否继续删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const { code, data } = await PrivilegeDelete({
						id: row.id,
					})
				if (code === 200) {
		
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
					this.initData()
				}
				
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			onSubmit() {
				this.$refs['form'].validate(valid => {
					if (valid) {
		
						for (let key in this.formData) {
								this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
						}
						PrivilegeSave(this.formData).then(res => {
								if (res.code === 200) {
										this.$message({
											type: 'success',
											message: '操作成功'
										})
										this.addDialog2 = false
										this.initData()
								}
						})
		
					}
				})
			},
			closeAddDialog() {
				this.user_code = undefined
			},
			closeAddDialog2() {
				if (this.$refs['form']) {
					this.$refs['form'].clearValidate() // 清除整个表单的校验
					this.$refs['form'].resetFields() // 清除整个表单的校验
				}
				this.formData = {
					id: undefined,
					name: undefined,
					icon: undefined,
					light_icon: undefined,
					tag: undefined,
					category_id: undefined,
					sort: undefined
				}
			},
			handlePictureSuccess1() {
				this.formData.light_icon = this.ossLastImgUrl
			},
			handlePictureRemove1() {
				this.formData.light_icon = undefined
			},
			handlePictureSuccess2() {
				this.formData.icon = this.ossLastImgUrl
			},
			handlePictureRemove2() {
				this.formData.icon = undefined
			},
		}
	}
</script>

<style scoped lang="scss">

.imageStyle {
  width: 250px;
}

.awardBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  .awardInfo {
      margin-right: 10px;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      width: 148px;
      height: 148px;
      border: 1px solid #c0ccda;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;

      .closeIcon {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 10px;
          background: rgba(0,0,0,.6);
          color: #ffffff;
          overflow: hidden;
          cursor: pointer;
          font-size: 18px;
          opacity: 0;
          z-index: 0;
      }
  }
  .hide_box:hover {
      .closeIcon {
          opacity: 1;
          z-index: 1;
      }
  }
  .show_box {
      .closeIcon {
          opacity: 0;
          z-index: -1;
      }
  }
}
.formWidth {
  width: 40%;
  display: inline-block;
}
</style>
